<script setup>
import { computed } from 'vue'

const props = defineProps({
  knowledge: {
    type: Array,
    required: true
  }
})

const getRelevanceColor = (relevance) => {
  if (relevance > 90) return '#52c41a'
  if (relevance > 80) return '#1890ff'
  if (relevance > 70) return '#faad14'
  return '#ff4d4f'
}
</script>

<template>
  <div class="knowledge-base-card">
    <div class="card-header">
      <h2><i class="fas fa-book"></i> 关联知识库</h2>
      <el-tag type="info">RAG检索结果</el-tag>
    </div>

    <div class="knowledge-content">
      <div v-if="knowledge.length === 0" class="empty-knowledge">
        <i class="fas fa-book-open"></i>
        <p>生成故障分析报告后，将显示相关技术文档和案例</p>
      </div>

      <div v-else class="knowledge-items">
        <div
            v-for="item in knowledge"
            :key="item.id"
            class="knowledge-item"
        >
          <div class="item-header">
            <div class="item-title">{{ item.title }}</div>
            <el-tag
                size="small"
                :color="getRelevanceColor(item.relevance)"
            >
              相关度: {{ item.relevance }}%
            </el-tag>
          </div>

          <div class="item-source">
            <i class="fas fa-database"></i> {{ item.source }}
          </div>

          <div class="item-content">
            {{ item.content }}
          </div>

          <div class="item-actions">
            <el-button size="small">
              <i class="fas fa-download"></i> 下载文档
            </el-button>

            <el-button size="small" type="primary">
              <i class="fas fa-external-link-alt"></i> 查看详情
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.knowledge-base-card {
  background: linear-gradient(135deg, #1a2a52, #152245);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  border: 1px solid #2a3a6a;
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #2a3a6a;
}

.card-header h2 {
  font-size: 18px;
  color: #e4e8f0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.knowledge-content {
  height: calc(100% - 60px);
  overflow-y: auto;
}

.empty-knowledge {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #a0b1d0;
  padding: 20px;
  text-align: center;
}

.empty-knowledge i {
  font-size: 50px;
  margin-bottom: 15px;
  color: #4facfe;
}

.knowledge-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.knowledge-item {
  background: rgba(10, 25, 55, 0.7);
  border-radius: 8px;
  padding: 15px;
  border-left: 4px solid #4facfe;
  transition: all 0.3s;
}

.knowledge-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.item-title {
  font-weight: 600;
  font-size: 16px;
  color: #e4e8f0;
}

.item-source {
  font-size: 12px;
  color: #a0b1d0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.item-content {
  font-size: 14px;
  color: #c0d0f0;
  line-height: 1.6;
  margin: 10px 0;
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.item-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}
</style>